<template>
    <div>
        <ul class='list-wrap'>
            <li class='list-item border-bottom' v-for="item in list">
              <span class="mp-ticketype-ticket"></span>
                {{item.title}}
               <div v-if="item.children">
                  <detail-list :list="item.children"></detail-list>
               </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name:"DetailList",
    props:{
        list:Array
    }
}
</script>
<style lang="scss" scoped>
.list-item{
    width:100%;
    position:relative;
    padding:0 .1rem;
    line-height:.6rem;
    padding-left:.52rem;
}
.mp-ticketype-ticket {
    display: inline-block;
    position: absolute;
    width: .36rem;
    height: .36rem;
    top:.15rem;
    left:.1rem;
    background: url(//s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat;
    margin-right: .1rem;
    background-size: .4rem 3rem;
}
</style>
